<template>
    <div v-if="intgralStatus">
        <div class="m-modal-cov"></div>
        <div class="api m-modal-box">
            <div class="m-modal-header">
                {{title}}
                <span @click="close"><Icon type="close-round"></Icon></span>
            </div>
            <div class="m-modal-content" style=" overflow-y:auto; overflow-x:auto; width:800px; height:400px;">
                <Table border :columns="columns" :data="detailData"  ></Table>
            </div>
            <div class="m-modal-footer">
              <!--  <Button type="primary"style="width: 80px">提交</Button>-->
            </div>
        </div>
    </div>
</template>
<script>
    import API from '../../config/api'
    import qs from 'qs'
    export default {
        props: ['intgralStatus','detailData','titles','names','flags'],
        data() {
            return {
                switchStatus:true,
                columns:[
                    {
                        title: '积分记录的描述',
                        width: 240,
                        key: 'integral_record_describe'
                    },
                    {
                        title: '增减标志',
                        width: 100,
                        key: 'integral_record_flag',
                        render: (h, params) => {
                            const row = params.row;
                            const color = row.integral_record_flag  == 1 ? 'green' : 'red';
                            const text = row.integral_record_flag  == 1 ? '增加' : '减少';
                            return h('span', {
                                style: {
                                    color: color
                                }
                            }, text);
                        }
                    },
                    {
                        title: '积分数量',
                        width: 100,
                        key: 'integral_record_num'
                    },
                    {
                        title: '积分规则标志',
                        width: 120,
                        key: 'integral_rule_flag'
                    },
                    {
                        title: '添加时间',
                        width: 100,
                        key: 'addtime'
                    },
                    {
                        title: '状态',
                        width: 100,
                        key: 'status',
                        render: (h, params) => {
                            const row = params.row;
                            const color = row.status  == 1 ? 'green' : 'red';
                            const text = row.status  == 1 ? '有效' : '无效';
                            return h('span', {
                                style: {
                                    color: color
                                }
                            }, text);
                        }
                    },
                ]
            }
        },

        methods: {
            close() {
                this.$emit('closeModal')
            },
        },
        computed: {
            title(){
                switch (this.dealerId){
                    case 0:
                        return '<<>>推荐的人';
                    default:
                        return  this.titles;
                }
            },


        }
    }
</script>
<style scoped>
    .m-modal-cov {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index: 101;
        top: 0;
        left: 0;
        opacity: .5;
    }
    .m-modal-box {
        position: fixed;
        width: 800px;
        z-index: 102;
        margin-left: 10%;
        background-color: #fff;
        border-radius: 5px;
    }
    .m-modal-content {
        padding: 20px;
    }
    .m-modal-header {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        border-bottom: 1px solid #d6d6d6;
        padding: 0 10px 0 20px;
    }
    .m-modal-header span {
        float: right;
        padding: 0 10px;
        cursor: pointer;
    }
    .m-modal-footer {
        height: 50px;
        line-height: 50px;
        border-top:1px solid #d6d6d6;
        padding-right: 20px;
        text-align: right;
    }
    .m-modal-content-header {
        height: 40px;
    }
    .api table {
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 100%;
        margin-bottom: 24px;
    }
    .api table td, .api table th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left;
    }
    .api table th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600;
    }
    .car-header {
        background-color: #f7f7f7;
        padding-left: 15px;
        border: 1px solid #e9eaec;
        border-radius: 2px;
        height: 30px;
        line-height: 30px;
    }
</style>
